<template>
  <ul
    :class="[
      'el-upload-list',
      'el-upload-list--' + listType,
      { 'is-disabled': disabled }
    ]"
    name="el-list"
  >
    <draggable :set-data="setData" :list="files" group="article" class="dragArea">
      <li
        v-for="(file, index) in files"
        :key="index"
        :class="['el-upload-list__item', focusing ? 'focusing' : '']"
        tabindex="0"
        @keydown.delete="!disabled && $emit('remove', file)"
        @focus="focusing = true"
        @blur="focusing = false"
        @click="focusing = false"
      >
        <slot :file="file">
          <el-image
            v-if="['picture-card', 'picture'].indexOf(listType) > -1"
            class="el-upload-list__item-thumbnail"
            :src="file"
            fit="cover"
          />
          <!-- <img
            v-if="['picture-card', 'picture'].indexOf(listType) > -1"
            class="el-upload-list__item-thumbnail"
            :src="file"
            alt=""
          > -->
          <label class="el-upload-list__item-status-label">
            <i
              :class="{
                'el-icon-upload-success': true,
                'el-icon-circle-check': listType === 'text',
                'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
              }"
            />
          </label>
          <i v-if="!disabled" class="el-icon-close" @click="$emit('remove', file)" />
          <i v-if="!disabled" class="el-icon-close-tip">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
          <span v-if="listType === 'picture-card'" class="el-upload-list__item-actions">
            <span
              v-if="handlePreview && listType === 'picture-card'"
              class="el-upload-list__item-preview"
              @click="handlePreview(file)"
            >
              <i class="el-icon-zoom-in" />
            </span>
            <span
              v-if="!disabled && handlePreview"
              class="el-upload-list__item-delete"
              @click="remove(file)"
            >
              <i class="el-icon-delete" />
            </span>
          </span>
        </slot>
      </li>
    </draggable>
  </ul></template>
<script>
import draggable from 'vuedraggable'
import Locale from 'element-ui/src/mixins/locale'

export default {
  name: 'FUploadList',
  components: { draggable },
  mixins: [Locale],
  props: {
    files: {
      type: Array,
      default() {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    handlePreview: { type: Function, default: () => {} },
    handleRemove: { type: Function, default: () => {} },
    listType: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      focusing: false
    }
  },
  methods: {
    parsePercentage(val) {
      return parseInt(val, 10)
    },
    setData(dataTransfer) {
      dataTransfer.setData('Text', '')
    },
    handleClick(file) {
      this.handlePreview && this.handlePreview(file)
    },
    remove(file) {
      this.$emit('remove', file)
    }
  }
}
</script>
